<template>
    <div class="home container">
        <div class="header-box">
            <div class="nav-box">
                <span class="title">{{companyName}}</span>
                <span class="iconfont iconhistory" @click="goHistory"></span>
            </div>
            <van-tabs class="tabs-box" v-model="active" color="#1989fa" title-active-color="#1989fa" background="#fff" line-height="1px">
                <van-tab title="待办">
                </van-tab>
                <van-tab title="跟踪">
                </van-tab>
                <van-tab title="日程">
                </van-tab>
            </van-tabs>
        </div>
        <div class="tabs-content">
            <transition :name="tabAnimation">
                <keep-alive>
                    <component :is="current"></component>
                </keep-alive>
            </transition>
        </div>
        <Footer :active="1"></Footer>
    </div>
</template>
<script>
import Footer from '@/components/footer';
import Todo from '@/views/home/todo';
import Track from '@/views/home/track';
import Schedule from '@/views/home/schedule';
export default {
    name: "Home",
    components:{
        Footer,
        Todo,
        Track,
        Schedule
    },
    created() {
        
    },
    mounted() {
        
    },
    data() {
        return {
            companyName: "南云医药",
            active:0,
            current:'Todo',
            currentArray:['Todo','Track','Schedule'],
            tabAnimation:'',
        }
    },
    methods:{
        goHistory() {
            this.$router.push('/search');
        }
    },
    watch: {
        active(newActive,old) {
            if(newActive > old) {
                this.tabAnimation = 'slide-rightin-leftout';
            } else {
                this.tabAnimation = 'slide-leftin-rightout';
            }
            this.current = this.currentArray[newActive];
        }
    }
}
</script>
<style lang="less">
@import '../../css/var.less';
.home {
    overflow-x:hidden;
    overflow-y:scroll;
    .header-box {
        position: fixed;
        top: 0;
        left: 0;
        width:100%;
        z-index: 1;
        background: #fff;
        .nav-box {
            height:40px;
            line-height:40px;
            text-align: center;
            background:#fff;
            position: relative;
            .title {
                font-size:18px;
                font-weight: bold;
            }
            .iconfont {
                position: absolute;
                top: 0;
                right: 16px;
                font-size: 20px;
            }
        }
    }
    .tabs-content {
        position: absolute;
        top:85px;
        left: 0;
        right: 0;
        bottom:0;
        overflow: hidden;
    }
}
.van-tabs__nav--line {
    padding-bottom:10px;
}

</style>